<template>
	<view class="pet">
		<view class="pet-img">
			<image :src="pet.pic" />
			<view v-show="rightTip.label" class="special-price">
				{{rightTip.label}}
			</view>
		</view>
		<view class="pet-info">
			<view class="pet-current">
				<view class="pet-name">{{pet.firstLeftText}}</view>
			</view>
			<view class="pet-old">
				<view class="pet-address">{{pet.secondLeftText}}</view>
				<view class="pet-old-price">{{pet.secondRightText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			rightTip: {
				label: '',
			},
			pet:{}
		},
		name:"petPanel",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.pet{
	margin-left: 20rpx;
	>.pet-img{
		position: relative;
		width: 220rpx;
		height: 220rpx;
		border: 10rpx;
		overflow: hidden;
		>image{
			border-radius: 15rpx;
			width: 100%;
			height: 100%;
		}
	}
	>.pet-info{
		margin-top: 15rpx;
		>view{
			display: flex;
			align-items: center;
			justify-content: space-between;
			>view{
				flex-basis: 40%;
			}
		}
		>.pet-current{
			padding: 0 8rpx;
			>.pet-name{
				font-weight: 550;
				text-align: left;
				font-size: 26rpx;
				flex-basis: 100%;
			}
			>.pet-price{
				font-weight: 550;
				font-size: 26rpx;
				color: #eb0000;
				text-align: right;
			}
		}
		>.pet-old{
			padding: 0 8rpx;
			margin-top: 8rpx;
			>.pet-address{
				font-size: 25rpx;
				color: #eb0000;
				flex-basis: 40%;
				font-weight: 550;
			}
			>.pet-old-price{
				font-size: 22rpx;
				flex-basis: 60%;
				opacity: 0.7;
				text-align: right;
			}
		}
	}
}
.special-price{
	position: absolute;
	right: -45rpx;
	top: 10rpx;
	font-size: 22rpx;
	color: white;
	padding: 4rpx 50rpx;
	transform: rotateZ(45deg);
	background: linear-gradient(to left, rgb(252, 74, 26), rgb(247, 183, 51));;
}
</style>
